<template>
  <div class="car-main">
    <div class="cartop">
      <div class="carItem">30天无忧退货</div>
      <div class="carItem">48小时快速退款</div>
      <div class="carItem">满88元免包邮</div>
    </div>
    <div class="goodsList">
      <van-swipe-cell stop-propagation v-for="item in carList" :key="item.id">
        <van-checkbox
          v-model="item.isChecked"
          checked-color="#b4282d"
        ></van-checkbox>

        <van-card
          :num="item.number"
          :price="item.retail_price"
          :title="item.goods_name"
          class="goods-card"
          :thumb="item.list_pic_url"
        />
        <template #right>
          <van-button
            square
            text="删除"
            type="danger"
            class="delete-button"
            @click="deletCar(item.id)"
          />
        </template>
      </van-swipe-cell>
      <van-submit-bar :price="total" button-text="提交订单" @submit="onSubmit">
        <van-checkbox v-model="isAllChecked"  checked-color="#b4282d">全选</van-checkbox>
      </van-submit-bar>
    </div>
  </div>
</template>

<script>
//重点:1.实现checkbox(isAllChecked)全选按钮,2.(total商品金额)数据实时改变,通过computed来监听
//     3.javascript方法: map()方法返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值;
import carApi from "@/api/car/index";
import orderApi from '@/api/order/index'
import Vue from "vue";
import {
  SwipeCell,
  Card,
  Button,
  Dialog,
  Toast,
  Checkbox,
  CheckboxGroup,
  SubmitBar,
} from "vant";

Vue.use(SwipeCell)
  .use(Card)
  .use(Button)
  .use(Dialog)
  .use(Checkbox)
  .use(CheckboxGroup)
  .use(SubmitBar);
export default {
  name: "car",
  data() {
    return {
      carList: [],
    };
  },
  created() {
    this.getCarList();
  },
  methods: {
   async getCarList() {
     await carApi.cartList({
          openId: "15845697415",
        })
        .then((res) => {
          res.data.forEach((ele)=>(ele.isChecked = false))
          this.carList = res.data;
        });
    },
    deletCar(id) {
      Dialog.confirm({
        message: "确认要删除该商品?",
      })
        .then(() => {
          carApi.deletCart({
              id: id,
            })
            .then((res) => {
              var index = this.carList.findIndex((item) => {
                item.id == id;
              });
              this.carList.splice(index, 1);
              this.getCarList();
            });
        })
        .catch(() => {
          Toast({
            message: "取消成功",
          });
        });
    },
    // 订单提交
    onSubmit() {
      var arr=this.carList.map(ele=>ele.goods_id)
      console.log(arr);
      orderApi.orderSubmit({
        openId:'15845697415',
        goodsId:arr.join(','),
        allPrise:this.total   
      })
      .then(res=>{
        Toast({
          message:'提交成功'
        })
        this.$router.push({name:'orderDetail'})
      })
    },
  },
  computed:{
     isAllChecked: {
      get() {
        return this.carList.every((ele) => ele.isChecked);
         //单个数据全部选定时,全选也就被选定了,单个数据有一个没被选定,那么全选也就不会被选定
      },
      set(val) {
          //val反应全选是否被选中时,全选中返回true;相反,返回false
        console.log(val);
        this.carList.forEach((ele) => {
          ele.isChecked = val;
          //选定全选后,单个数据根据全选情况而变化(全部被选中或全部没被选择)
        });
      },
    },
    total(){
      return this.carList.reduce((total,current)=>{
        if(current.isChecked){
          return total+current.number*current.retail_price*100
        }else{
          return total
        }
      },0)
    }
  }
};
</script>
<style lang='scss' scoped>
.car-main {
  .cartop {
    display: flex;
    justify-content: space-between;
    .carItem {
      width: 33.3%;
      height: 48px;
      line-height: 48px;
      background: url(http://nos.netease.com/mailpub/hxm/yanxuan-wap/p/20150730/style/img/icon-normal/servicePolicyRed-518d32d74b.png)
        5px no-repeat;
      background-size: 6px;
      color: #666;
      padding-left: 15px;
    }
  }
  .goodsList {
    .van-swipe-cell {
      position: relative;
      .van-checkbox {
        position: absolute;
        top: 50%;
        margin-top: -10px;
        left: 3px;
        z-index: 5;
      }
      .goods-card {
        margin: 0;
        background-color: $bagColor;
        .van-card__header {
          margin-left: 8px;
        }
      }
      .delete-button {
        height: 100%;
      }
    }
    .van-submit-bar {
      position: fixed;
      bottom: 50px;
    }
  }
}
</style>